tools skill

玩转Emmet

一、Emmet是什么

Emmet是一组用于快速编写HTML和CSS的工具，它由两个核心组件组成:缩写扩展器和与上下文无关的HTML标签对匹配器。

二、Emmet能干嘛

亲，难道你是传说中的”闪电手”，编写下面这个HTML结构，你需要多长时间，一分钟 ? 两分钟 ? 马上试试

<div id="page">
<div class="logo"></div>
<ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
</ul>
</div>

努力地敲着键盘…..
见证奇迹的时刻到了，请睁大你的双眼，抬起你那高贵的双手，轻轻地键入

#page>div.logo+ul#navigation>li*5>a{Item $}   ---------》革命尚未成功，请你迅速你按下Tab键

怎么样是不是已经有了恋爱的冲动，爱它就赶快行动吧 ——————-> 继续往下看

三、更多示例

示例1:
输入: div#header>ul#nav>li*4>a
输出:
<div id="header">
<ul id="nav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
</div>

示例2:
输入:div.item$*3
输出:
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

示例3:
输入:div#i$-test.class$$$*3
输出:
<div id="i1-test" class="class001"></div>
<div id="i2-test" class="class002"></div>
<div id="i3-test" class="class003"></div>

四、常用缩写

  • html:5 (html5结构)
  • link:css (引入css)
  • script:src (引入js)
  • script (html中插入js)
  • ul+ (ul及一个li)
  • a:link (插入a标签)
  • form:get (get表单)
  • input:hidden (hidden输入框)
  • div#name (id:name)
  • div.name (class:name)
  • head>link:css (head添加link)
  • p+p (添加2个p)
  • p*3 (添加3个p)
  • ul>li.item$*6 (创建ul下有个li同时class分别为item1，item2)

五、展开缩写说明

展开缩写功能将类似CSS的选择器转换为XHTML代码。
以下是支持的属性和操作符列表

  • E (元素名称 div,p)
  • E#id(使用id的元素div#content,p#intro)
  • E.class(使用类的元素div.header)
  • E > N(子代元素div>p)
  • E + N(兄弟元素h1+p)
  • E N(元素倍增ul#nav>li5>a)
  • E$ * N(条目编号)
Fork me on GitHub